<template>
	<view class="page">
		<view class="order-head" @tap="navigateTo('address')">
			<view class="order-head-number">收货信息</view>
			<view class="order-head-date">您还没有收货地址，请前往设置一个</view>
			<view class="order-head-status"><image src="http://yao.hayzon.com/static/summitOrder/arrow-black.png"></image></view>
		</view>
		<view class="order-sender">
			<view class="order-sender-title">发货药房</view>
			<view class="order-sender-box">
				<image class="order-sender-icon" :src="orderDetail.sender.logo"></image>
				<view class="order-sender-info-box">
					<view class="order-sender-orgName">
						<text>{{ orderDetail.sender.orgName }}</text>
						<image src="http://yao.hayzon.com/static/orderDetail/info.png"></image>
					</view>
					<view class="order-sender-infomation">{{ orderDetail.sender.infomation }}</view>
					<view class="order-sender-type">{{ orderDetail.sender.type }}</view>
				</view>
			</view>
		</view>
		<view class="order-prescript">
			<view class="order-prescript-title">处方</view>
			<view class="order-prescript-subtitle">{{ orderDetail.prescriptSubtitle }}</view>
			<view class="order-prescript-detail">
				<view>
					<text v-for="(item,index) in orderDetail.prescript" :key="index">{{ item }}</text>
				</view>
				<view class="order-prescript-pay">购买后即可查看完整处方</view>
			</view>
			<view class="txt"><text>数量</text><text class="txt-right">6剂</text></view>
		</view>
		<view class="itemSub">
			<view class="item"><text class="title">药品价格</text><text class="val">￥182.05</text></view>
			<view class="item"><text class="title">运费</text><text class="val">￥0.00</text></view>
		</view>
		<view class="itemSub button">
			<view class="item last">
				<text class="title">合计：</text>	<text class="color-txt">￥38.00</text>			
				<view class="val var-btn">提交需求单</view>		
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				orderDetail: {
					orderNumber: "50190730112729290",
					orderDate: "2019年7月30日 11:27",
					orderStatus: "1", //这里应该有对应关系吧？
					orderReceiveName: "孙先生",
					orderReceivePhone: "18813102489",
					orderReceiveAddress: "天津河西区大户头路28号",
					sender: {
						logo: "http://yao.hayzon.com/static/orderDetail/logo.png",
						orgName: "中药饮片-由康美提供",
						infomation: "全国最大重要饮片提供商，17:00前下单当日寄出。",
						type: "传统药材 自己煎煮"
					},
					prescriptSubtitle: "处方组成",
					prescript: ["黄芩", "甘草", "法半夏", "醋柴胡", "羌活", "苍术", "桂枝", "川牛膝", "虎杖", "麻黄", "大黄"],
					endTime: "14:47"
				}
			}
		},
		filters: {
			orderStatusFilter(value) {
				switch (value) {
					case "1":
						return "待支付";
					default:
						return "待支付";
				}
			}
		},
		methods: {
			navigateTo(type) {
				let url=''
				if(type=='address')
				url='newAddress'
				if(type=='orderDetail')
				url='orderDetail'
				
				uni.navigateTo({
					url: url
				})
			}
		}
	}
</script>

<style>
	.page {
		background-repeat: no-repeat;
		background-size: cover;
		/* background-image: url("~http://yao.hayzon.com/static/temp/111.png"); */
		height: 100%;
	}

	.order-head {
		margin-top: 10upx;
		padding: 35upx;
		position: relative;
		background-color: #fff;
	}

	.order-head-number {
		font-weight: bold;
		color: #666666;
	}

	.order-head-date {
		color: #e49760;
		font-size: 0.8em;
	}

	.order-head-status {
		position: absolute;
		right: 10upx;
		top: 80upx;
		color: #da6b57;
		
	}
	.order-head-status image{ width: 40upx; height: 40upx;}

	.order-receive {
		margin-top: 10upx;
		padding: 30upx;
		padding-top: 15upx;
		position: relative;
		background-color: #fff;
	}

	.order-receive-title {
		font-weight: bold;
		color: #333333;
	}

	.order-receive-orderer {
		margin-top: 10upx;
	}

	.order-receive-orderer-name {
		color: #333333;
		margin-right: 35upx;
	}

	.order-receive-orderer-phone {
		font-size: 0.8em;
		letter-spacing: 1px;
	}

	.order-receive-orderer-address {
		color: #a0a0a0;
	}

	.order-sender {
		margin-top: 10upx;
		padding: 30upx;
		padding-top: 15upx;
		position: relative;
		background-color: #fff;
	}

	.order-sender-title {
		font-weight: bold;
		color: #333333;
		font-size: 1.1em;

	}

	.order-sender-box {
		display: flex;
		flex-direction: row;
	}

	.order-sender-icon {
		width: 100upx;
		height: 100upx;
		flex-shrink: 0;
		margin-top: 60upx;
		margin-left: 5upx;
	}

	.order-sender-info-box {
		padding: 20upx;
		padding-top: 25upx;
	}

	.order-sender-orgName {
		font-size: 1.2em;
		color: #333333;
	}

	.order-sender-orgName image {
		width: 30upx;
		height: 30upx;
		vertical-align: text-bottom;
	}

	.order-sender-infomation {
		color: #999999;
		line-height: 1.4;
	}

	.order-sender-type {
		color: #666666;
	}

	.order-prescript {
		margin-top: 10upx;
		padding: 30upx;
		padding-top: 6upx;
		position: relative;
		background-color:#fff;
	}

	.order-prescript-title {
		font-weight: bold;
		color: #333333;
		font-size: 1.1em;
	}

	.order-prescript-subtitle {
		color: #666666;
	}

	.order-prescript-detail {
		background-repeat: no-repeat;
		background-size: 100%;
		background-image: url("~http://yao.hayzon.com/static/orderDetail/boxBackground.png");
	}

	.order-prescript-detail view:first-child {
		display: flex;
		flex-wrap: wrap;
		padding-top: 20upx;
		padding-left: 50upx;
		padding-bottom:35upx;
	}

	.order-prescript-detail view:first-child text {
		font-size: 1.2em;
		margin-right: 25upx;
		/* font-weight: bold; */
	}

	.order-prescript-pay {
		color: #999999;
		text-align: center;
		line-height: 1.5;
		font-size: 1.1em;
	}

	.order-end-time {
		margin-top:10upx;
		text-align: center;
		color: #999999;
		font-size: 0.7em;
		background-color:#ffffff;
	}
	.order-pay-button{
		margin-top:20upx;
		background-color:#da6b57;
		margin-left:30upx;
		margin-right:30upx;
		line-height:115upx;
		border-radius: 20upx;
		color:#ffffff;
		text-align: center;
		font-size:1.5em;
	}
	.txt-right{ float: right;}
	.txt{ margin-left:20upx; margin-right: 20upx;}
	.itemSub {
		width: 100%;
		background-color: #fff;
		margin-top: 10upx;
	}
	
	.item {
		border-bottom: 1px solid #eeeeee;
		height: 90upx;
		line-height: 90upx;
		margin-left: 30upx;
		padding-right: 60upx;
		background-color: #fff;
	}
	.title {
		font-size: 1.1em;
		color: #333333;
	}
	
	.val {
		color: #666666;
		float: right;
	}
	.itemSub {
		width: 100%;
		/* background-color: #fff; */
	}
	.button {
		width: 100%;
		position: fixed;
		bottom: 0px;
		background-color: #fff;
	}
	.var-btn {
		height: 100%;
		background-color: #eb544d;
		padding: 0upx;
		margin: 0upx;
		width: 280upx;
		color: #FFFFFF;
		line-height: 100upx;
		text-align: center;
		font-size: 1.1em;
	}
	.last{padding-right:0upx;}
	.color-txt{color: #e1894d;}
	
</style>
